// 语言包定义
const translations = {
    'zh': {
        'site.title': '个人作品集',
        'nav.home': '首页',
        'nav.about': '关于我',
        'nav.portfolio': '作品集',
        'nav.contact': '联系我',
        'hero.greeting': '你好，我是<span class="highlight">设计师姓名</span>',
        'hero.description': '专注于UI/UX设计、网页开发和创意设计',
        'hero.cta': '查看我的作品',
        'about.title': '关于我',
        'about.description': '我是一名Python Developer，擅长消息中间件、实时数据处理、高可用架构设计。喜欢诗歌集，近代历史，生物进化论，哲理。',
        'about.skills': '技能专长',
        'about.experience': '专业经历',
        'about.job.software-engineer': '软件工程师',
        'about.education.master': '硕士',
        'about.education.bachelor': '本科',
        'about.achievements': '个人成就',
        'about.achievement.1': '清华大学优秀毕业生',
        'about.achievement.2': '微软MVP',
        'about.achievement.3': '华为开发者认证',
        'portfolio.title': '我的作品',
        'portfolio.project1.title': '项目名称1',
        'portfolio.project1.desc': '简短描述项目1的内容和目的。',
        'portfolio.project2.title': '项目名称2',
        'portfolio.project2.desc': '简短描述项目2的内容和目的。',
        'portfolio.project3.title': '项目名称3',
        'portfolio.project3.desc': '简短描述项目3的内容和目的。',
        'portfolio.project4.title': '项目名称4',
        'portfolio.project4.desc': '简短描述项目4的内容和目的。',
        'portfolio.project5.title': '项目名称5',
        'portfolio.project5.desc': '简短描述项目5的内容和目的。',
        'portfolio.project6.title': '项目名称6',
        'portfolio.project6.desc': '简短描述项目6的内容和目的。',
        'contact.title': '联系我',
        'contact.description': '如果您对我的作品感兴趣或有任何合作机会，请随时联系我。',
        'contact.submit': '发送消息',
        'footer.copyright': '&copy; 2025 个人作品集. 保留所有权利。'
    },
    'en': {
        'site.title': 'Personal Portfolio',
        'nav.home': 'Home',
        'nav.about': 'About',
        'nav.portfolio': 'Portfolio',
        'nav.contact': 'Contact',
        'hero.greeting': 'Hello, I am <span class="highlight">Designer Name</span>',
        'hero.description': 'Specialized in UI/UX design, web development and creative design',
        'hero.cta': 'View My Work',
        'about.title': 'About Me',
        'about.description': 'I am a Python Developer specializing in message middleware, real-time data processing, and high-availability architecture design. I enjoy poetry collections, modern history, biological evolution, and philosophy.',
        'about.skills': 'Skills',
        'about.experience': 'Professional Experience',
        'about.job.software-engineer': 'Software Engineer',
        'about.education.master': 'Master\'s Degree',
        'about.education.bachelor': 'Bachelor\'s Degree',
        'about.achievements': 'Achievements',
        'about.achievement.1': 'Tsinghua University Outstanding Graduate',
        'about.achievement.2': 'Microsoft MVP',
        'about.achievement.3': 'Huawei Developer Certification',
        'portfolio.title': 'My Works',
        'portfolio.project1.title': 'Project Name 1',
        'portfolio.project1.desc': 'Brief description of project 1 content and purpose.',
        'portfolio.project2.title': 'Project Name 2',
        'portfolio.project2.desc': 'Brief description of project 2 content and purpose.',
        'portfolio.project3.title': 'Project Name 3',
        'portfolio.project3.desc': 'Brief description of project 3 content and purpose.',
        'portfolio.project4.title': 'Project Name 4',
        'portfolio.project4.desc': 'Brief description of project 4 content and purpose.',
        'portfolio.project5.title': 'Project Name 5',
        'portfolio.project5.desc': 'Brief description of project 5 content and purpose.',
        'portfolio.project6.title': 'Project Name 6',
        'portfolio.project6.desc': 'Brief description of project 6 content and purpose.',
        'contact.title': 'Contact Me',
        'contact.description': 'If you are interested in my work or have any cooperation opportunities, please feel free to contact me.',
        'contact.submit': 'Send Message',
        'footer.copyright': '&copy; 2025 Personal Portfolio. All rights reserved.'
    }
};

// 切换语言函数
function changeLanguage(lang) {
    // 更新页面上所有带有data-lang属性的元素
    document.querySelectorAll('[data-lang]').forEach(element => {
        const key = element.getAttribute('data-lang');
        if (translations[lang] && translations[lang][key]) {
            element.innerHTML = translations[lang][key];
        }
    });
    
    // 更新输入框的placeholder
    document.querySelectorAll('input, textarea').forEach(element => {
        if (element.hasAttribute('data-placeholder-' + lang)) {
            element.placeholder = element.getAttribute('data-placeholder-' + lang);
        }
    });
    
    // 更新HTML lang属性
    document.documentElement.lang = lang;
    
    // 更新按钮激活状态
    document.querySelectorAll('.lang-btn').forEach(btn => btn.classList.remove('active'));
    document.getElementById('switchTo' + (lang === 'zh' ? 'Zh' : 'En')).classList.add('active');
    
    // 保存语言偏好到localStorage
    localStorage.setItem('preferredLanguage', lang);
}

// DOM加载完成后执行
document.addEventListener('DOMContentLoaded', function() {
    // 初始化语言设置
    const savedLanguage = localStorage.getItem('preferredLanguage') || 'zh';
    changeLanguage(savedLanguage);
    
    // 语言切换按钮事件监听器
    document.getElementById('switchToZh').addEventListener('click', function() {
        changeLanguage('zh');
    });
    
    document.getElementById('switchToEn').addEventListener('click', function() {
        changeLanguage('en');
    });
    
    // 汉堡菜单交互
    const hamburger = document.querySelector('.hamburger');
    const navLinks = document.querySelector('.nav-links');

    hamburger.addEventListener('click', function() {
        hamburger.classList.toggle('active');
        navLinks.classList.toggle('active');
    });

    // 点击导航链接关闭汉堡菜单
    document.querySelectorAll('.nav-links a').forEach(link => {
        link.addEventListener('click', function() {
            hamburger.classList.remove('active');
            navLinks.classList.remove('active');
        });
    });

    // 平滑滚动效果
    document.querySelectorAll('a[href^="#"]').forEach(anchor => {
        anchor.addEventListener('click', function(e) {
            e.preventDefault();
            
            const targetId = this.getAttribute('href');
            if (targetId === '#') return;
            
            const targetElement = document.querySelector(targetId);
            if (targetElement) {
                window.scrollTo({
                    top: targetElement.offsetTop - 70, // 考虑导航栏高度
                    behavior: 'smooth'
                });
            }
        });
    });

    // 联系表单提交处理
    const contactForm = document.getElementById('contactForm');
    if (contactForm) {
        contactForm.addEventListener('submit', function(e) {
            e.preventDefault();
            
            // 简单的表单验证
            const name = this.querySelector('input[type="text"]').value;
            const email = this.querySelector('input[type="email"]').value;
            const message = this.querySelector('textarea').value;
            
            if (name && email && message) {
                // 在实际应用中，这里会发送表单数据到服务器
                alert('感谢您的留言！我们会尽快回复您。');
                this.reset();
            } else {
                alert('请填写所有必填字段。');
            }
        });
    }

    // 添加滚动监听，显示返回顶部按钮和导航栏效果
    const backToTopButton = document.createElement('button');
    backToTopButton.className = 'back-to-top';
    backToTopButton.textContent = '↑';
    backToTopButton.style.cssText = `
        position: fixed;
        bottom: 30px;
        right: 30px;
        width: 50px;
        height: 50px;
        border-radius: 50%;
        background-color: #3498db;
        color: white;
        border: none;
        font-size: 1.5rem;
        cursor: pointer;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.3s ease, visibility 0.3s ease;
        z-index: 999;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
    `;
    
    document.body.appendChild(backToTopButton);
    
    const header = document.querySelector('header');
    
    window.addEventListener('scroll', function() {
        // 返回顶部按钮显示/隐藏
        if (window.pageYOffset > 300) {
            backToTopButton.style.opacity = '1';
            backToTopButton.style.visibility = 'visible';
        } else {
            backToTopButton.style.opacity = '0';
            backToTopButton.style.visibility = 'hidden';
        }
        
        // 导航栏滚动效果
        if (window.pageYOffset > 50) {
            header.style.backgroundColor = 'rgba(255, 255, 255, 0.95)';
            header.style.boxShadow = '0 2px 10px rgba(0, 0, 0, 0.1)';
        } else {
            header.style.backgroundColor = 'white';
            header.style.boxShadow = '0 2px 10px rgba(0, 0, 0, 0.1)';
        }
    });
    
    // 返回顶部功能
    backToTopButton.addEventListener('click', function() {
        window.scrollTo({
            top: 0,
            behavior: 'smooth'
        });
    });

    // 为作品集项目添加悬停效果
    const portfolioItems = document.querySelectorAll('.portfolio-item');
    portfolioItems.forEach(item => {
        const img = item.querySelector('img');
        const info = item.querySelector('.portfolio-info');
        
        item.addEventListener('mouseenter', function() {
            img.style.transform = 'scale(1.05)';
            img.style.transition = 'transform 0.3s ease';
            info.style.backgroundColor = 'rgba(255, 255, 255, 0.95)';
        });
        
        item.addEventListener('mouseleave', function() {
            img.style.transform = 'scale(1)';
            info.style.backgroundColor = 'white';
        });
    });

    // 页面加载动画
    const fadeInElements = document.querySelectorAll('section');
    const observerOptions = {
        threshold: 0.1,
        rootMargin: '0px 0px -50px 0px'
    };
    
    const observer = new IntersectionObserver((entries) => {
        entries.forEach(entry => {
            if (entry.isIntersecting) {
                entry.target.style.opacity = '1';
                entry.target.style.transform = 'translateY(0)';
                observer.unobserve(entry.target);
            }
        });
    }, observerOptions);
    
    fadeInElements.forEach(element => {
        element.style.opacity = '0';
        element.style.transform = 'translateY(20px)';
        element.style.transition = 'opacity 0.6s ease, transform 0.6s ease';
        observer.observe(element);
    });

    // 在加载时立即为第一个元素设置样式
    if (fadeInElements.length > 0) {
        fadeInElements[0].style.opacity = '1';
        fadeInElements[0].style.transform = 'translateY(0)';
    }
});

// 确保页面完全加载后执行的功能
window.addEventListener('load', function() {
    // 可以在这里添加更多需要页面完全加载后执行的代码
    console.log('页面完全加载完成');
    
    // 初始化书本图标的交互功能
    initBookIcons();
});

// 书本图标交互功能
function initBookIcons() {
    // 为所有书本图标添加点击事件
    document.querySelectorAll('.book-icon').forEach(book => {
        book.addEventListener('click', function() {
            // 获取对应的文字内容元素
            const bookId = this.getAttribute('data-book-id');
            const bookContent = document.getElementById(`book-content-${bookId}`);
            
            // 切换显示/隐藏状态
            if (bookContent) {
                bookContent.classList.toggle('show');
                
                // 添加出现动画
                if (bookContent.classList.contains('show')) {
                    bookContent.style.opacity = '0';
                    bookContent.style.transform = 'translateY(10px)';
                    
                    setTimeout(() => {
                        bookContent.style.opacity = '1';
                        bookContent.style.transform = 'translateY(0)';
                    }, 10);
                } else {
                    bookContent.style.opacity = '0';
                    bookContent.style.transform = 'translateY(10px)';
                }
            }
        });
    });
    
    // 点击页面其他地方关闭书本内容
    document.addEventListener('click', function(e) {
        if (!e.target.closest('.book-icon') && !e.target.closest('.book-content')) {
            document.querySelectorAll('.book-content').forEach(content => {
                if (content.classList.contains('show')) {
                    content.classList.remove('show');
                    content.style.opacity = '0';
                    content.style.transform = 'translateY(10px)';
                }
            });
        }
    });
}